<template>
    <div class="userVmsg">
        <div class="userValidation-header">
            <p class="textOne">人脸识别</p>
        </div>
        <div class="userValidation-content">
            <div >
                <p class="textthree">请根据指引开启相机和储存权限</p>
            </div>
            <div class="textthree-img">
                <p class="textthreeTwo">请保持正脸在取景框中，根据屏幕指示完成识别
                    <span  class="face_question_span" @click.stop="changeQuestionFlag">
                        <img class="face-question" src="" alt="" >
                        <div v-show="questionFlag" class="msg-question">为确保人像通过认证，在识别过程中请处于光线充足的环境中，并保持面部无遮挡（摘下眼镜等可能造成反光的物品）</div>
                    </span>
                </p>
            </div>                                         
        
            <img class="face-bg" src="" alt="">
            <div class="threemsg-div">
                <!-- <span>正对手机</span>
                <span>光线充足</span>
                <span>脸无遮挡</span> -->
            </div>
           
            <div class="buttonOut" >
                <van-button
                    block
                    square
                    type="primary"
                    class="primaryButton"
                    :text="btnText"
                    @click="agreeBtn" />       
            </div>
            <div class="msg-div111">
                <van-icon name="info" style="margin-right: 6px;" />{{ msg }}
            </div>
        </div>
    </div>
    
</template>
<script setup lang="ts" name="userVmsg">
import { useRouter } from "vue-router"
import { ref, onMounted } from "vue"
import { Toast } from '/@/utils/Message';

const props = defineProps({
    questionFlag: {
        type: Boolean,
        default: false
    },
    btnText: {
        type: String,
        default: ""
    },
    msg: {
        type: String,
        default: ""
    },
    routerQuery: {
        type: Object,
        default: {}
    }
})
const emit = defineEmits(['update:questionFlag'])
const questionFlag = ref<Boolean>(false)
const changeQuestionFlag = () => {
    questionFlag.value = !questionFlag.value
    emit('update:questionFlag',  questionFlag.value) 
}
const router = useRouter()
const agreeBtn = () => {
    router.replace({ 
        path:"/userFacedetection",
        query:{
        ...props.routerQuery
        }
    })
    return
    // console.log(sessionStorage.getItem('jstJointLoginVo'),'z')
    // 金世通内嵌界面开启摄像头权限逻辑
    if(sessionStorage.getItem('jstJointLoginVo')){
        console.log('进入金世通原生交互')
        // 语音权限
        var obj = {
            method: 'jstMicrophonePermissions',
            data: {}
        }
        if(navigator.userAgent.indexOf("JinShiTong_iOS") !== -1){
            (window as any).webkit.messageHandlers.interactive.postMessage(obj);
        } else if (navigator.userAgent.indexOf("JinShiTong_Android")!== -1){ 
            //interactive 安卓端定义的类名 postMessage 安卓端定义的方法名
            (window as any).interactive.postMessage(JSON.stringify(obj))
        }
    } else {
        router.push({ 
            path:"/userFacedetection",
            query:{
            ...props.routerQuery
            }
        })
    }
}
const jstMicrophoneJudgment = ref('')
const jstCameraJudgment = ref('')
// 语音权限
let jstMicrophone = (q:any) =>{
    console.log('语音权限')
    console.log(q,'q语音权限')
    jstMicrophoneJudgment.value = q.jstMicrophoneJudgment
    if(jstMicrophoneJudgment.value == 'true') {
        // 人脸权限 
        var objz = {
            method: 'jstCameraPermissions',
            data: {}
        }
        if(navigator.userAgent.indexOf("JinShiTong_iOS") !== -1){
            (window as any).webkit.messageHandlers.interactive.postMessage(objz);
            } else if (navigator.userAgent.indexOf("JinShiTong_Android")!== -1){ 
                //interactive 安卓端定义的类名 postMessage 安卓端定义的方法名
                (window as any).interactive.postMessage(JSON.stringify(objz))
            }
    } else {
        // Toast(res.msg) // 暂时不给提示点击否
    }
}
// 人脸权限
let jstCamera = (q:any) =>{
    console.log('人脸权限')
    console.log(q,'q人脸权限')
    jstCameraJudgment.value = q.jstCameraJudgment
    if(jstCameraJudgment.value == 'true') {
        console.log('route')
        router.push({ 
            path:"/userFacedetection",
            query:{
            ...props.routerQuery
            }
        })
    } else {
        // Toast(res.msg) // 暂时不给提示点击否
    }
}

onMounted(async()=>{
    (window as any ).jstMicrophone = jstMicrophone,
    (window as any ).jstCamera = jstCamera
})
</script>
<style lang="less" scoped>
:deep(.van-button) {
  height: 44px;
  border-radius: 5px;
  font-size: 18px;
  color: #ffffff;
  font-weight: 400;
  line-height: 44px;
}
.userVmsg {
    // width: 95%;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-size: 100% 50%;
    background-image: url("/src/assets/img/loginIcon/loginBackground.png");
    /* 根据需要调整背景图的大小和位置 */
    /* 背景图从底部开始 */
    background-repeat: no-repeat;
    .userValidation-header {
        
        p {
            // width: 120px;
            text-align: center;
            margin: 0 auto;
            color: rgba(0, 0, 0, .6);
            font-size: 28px;
            font-weight: 500;
            line-height: 35px; 
            margin-top: 16px;
            // margin-bottom: 1.1%;
        }
       
    }
    .face_question_span{
        position: relative; /* 为了使用绝对定位的子元素 */
        .face-question {
            display: inline-block;
            content: @face-question-icon;
        }
    }
    .userValidation-content {
        padding: 10px 0 26px 0;
        width: 100%;
        box-sizing: border-box;
        p {
            padding: 0;
            margin: 0;
            color: #333333;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
        }
        .face-bg {
            // content: @face-background-img;
            content: @face-background-wm-img;
            width: 60.3%; 
            height: 73%;       
            margin: 0 auto;
            margin-top: 3.5%;
            margin-bottom: 9.9%;
        }   
        .threemsg-div {
            content: @face-hint-img;
            width: 70%; 
            height: 58%;       
            margin: 0 auto;
            margin-bottom: 15.5%;
          
        }
        .buttonOut{
            // width: 260px;
            width: 70%;
            max-width: 400px;
            margin:  0 auto;
            margin-bottom:5.9%;
            padding: 0 10px;
            box-sizing: border-box;
        }
        .van-button {
            &.primaryButton {
                border-radius: 20px !important;
                background-color: #3296FA;
            }
        }
    }
    .msg-div {
        width: 90%;
        margin: 0 auto;
        margin-top: 3.8%;
        .face-msg {
            width: 15px;
            height: 15px;
            margin-right: 5px;
            content: @face-msg-icon;
            float: left;
            margin-top: 8px;
        }
        span {
            padding: 0;
            margin: 0;
            font-size: 13px;
            font-weight: 400;
            width: calc(100% - 20px);
            // color: #999999;
            color: rgba(255, 118, 16, .7);
            line-height: 18.5px;
            // float: left;
            text-align: center;
        }
        

    }
    .msg-div111{
        width: calc(100% - 60px);
        color: rgba(255, 118, 16, .7);
        margin: 0 auto;
        margin-top: 3.8%; 
        padding: 0;
        font-size: 13px;
        font-weight: 400;
        line-height: 18.5px;
        text-align: left;
    }
    .textthree {
        font-size: 14px;
        color: #525252;
        line-height: 20px;
        font-weight: 400;
        text-align: center;
    }
    .textthree-img {
        margin-top: 0.7%;
        text-align: center;
        margin-bottom: 24px;
        img {
            width: 17px;
            margin-left: 3px;
            padding: 2px;
        }
    }
    .msg-question {
        width: auto;
        height: auto;
        max-width: 250px;
        padding: 6px 6px;
        font-size: 10px;
        text-align: left;
        box-shadow: #ccc 0 0 10px;
        line-height: 16px; 
        background-color: #fff;
        position: absolute;  
        border-radius: 4px;
        left: -200px;
        margin-top: 5px;
        z-index: 0;
    }
    .msg-question::before{
        content: "";
        width: 0px;
        height: 0px;
        border: 8px solid #ccc;
        border-color: transparent transparent #ccc transparent;
        position: absolute;
        right: 1%;
        top: -16px;
    }
    .msg-question::after{
        content: "";
        width: 0px;
        height: 0px;
        border: 8px solid rgb(255, 255, 255);
        border-color: transparent transparent rgb(255, 255, 255) transparent;
        position: absolute;
        right: 1%;
        top: -16px;
    }
}
    
</style>